﻿@model Chess.Models.HomeModel
@{
    ViewBag.Title = "Home Page";
    Chess.Models.TaiKhoan tk = (Chess.Models.TaiKhoan)Session["TaiKhoan"];
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Css/jquery.ui.all.css")"/>
    <script src="../../Content/Js/jquery-1.8.2.js"></script>
    <script src="@Url.Content("~/Content/Js/jquery.ui.core.js")"></script>
    <script src="@Url.Content("~/Content/Js/jquery.ui.widget.js")"></script>
    <script src="@Url.Content("~/Content/Js/jquery.ui.tabs.js")"></script>
    <script src="../../Content/Js/jquery.form.js"></script>
    <script>
        $(function () {
            $("#tabs").tabs();
        });
    </script>
    <link href="@Url.Content("~/Content/Css/TrangChu.css")" rel="stylesheet" type="text/css" />
    <script src='@Url.Content("~/Content/Js/jquery-ui.custom.js")'></script>
    <script src='@Url.Content("~/Content/Js/util.js")'></script>
    <script src='@Url.Content("~/Content/Js/Index.js")'></script>
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Css/style.css")" >

    <script src="@Url.Content("~/Content/Js/jquery.jscrollpane.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/Js/jquery-ui.js")"></script>
    <script src="@Url.Content("~/Content/Js/jquery.mousewheel.js")"></script>
    <script src="@Url.Content("~/Content/Js/scroll-startstop.events.jquery.js")"></script>
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Css/jquery.jscrollpane.codrops1.css")"/>
    <link href="../../Content/Css/jquery.ui.dialog.css" rel="stylesheet" />
    <title>Trang chủ</title>
    <style>
        fieldset {
            padding: 0;
            border: 0;
            margin-top: 25px;
        }

        div#users-contain {
            width: 350px;
            margin: 20px 0;
        }

            div#users-contain table {
                margin: 1em 0;
                border-collapse: collapse;
                width: 100%;
            }

                div#users-contain table td, div#users-contain table th {
                    border: 1px solid #eee;
                    padding: .6em 10px;
                    text-align: left;
                }

        .ui-dialog .ui-state-error {
            padding: .3em;
        }

        .validateTips {
            border: 1px solid transparent;
            padding: 0.3em;
        }
    </style>
</head>
<body>

    <div id="exitdialog-form" title="Delete friend">
        <p class="validateTips">Enter the username you want to delete !</p>
        <form>
            <fieldset>
                <label for="namecancel">Name</label>
                <input type="text" name="namecancel" id="namecancel" value="" class="text ui-widget-content ui-corner-all" />
            </fieldset>
        </form>
    </div>

    <div id="invite-form" title="Invite friend">
        <p class="validateTips">Enter the username you want to invite !</p>
        <form>
            <fieldset>
                <label for="namecancel">Name</label>
                <input type="text" name="namecancel" id="namecancel" value="" class="text ui-widget-content ui-corner-all" />
            </fieldset>
        </form>
    </div>

    <div id="invite-request-form" title="Invite friend">
        <p class="validateTips">Invited by</p>
        <p id="invitor"></p>
        <form>
            <fieldset>
            </fieldset>
        </form>
    </div>

    <div id="dialog-form" title="Add new friend">
        <p class="validateTips">Enter the username !</p>
        <form>
            <fieldset>
                <label for="name">Name</label>
                <input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all" />
            </fieldset>
        </form>
    </div>
    <input type="hidden" id="TK_UserName" value="@tk.UserName" />
    <input type="hidden" id="TK_Id" value="@tk.Id" />
    <input type="hidden" id="TK_NgaySinh" value="@tk.NgaySinh" />
    <input type="hidden" id="TK_HoTen" value="@tk.HoTen" />
    <input type="hidden" id="IDPhongDangDanh" value="-1" />
    <div id="wrap">
        <div id="header">
            <div id="contents">
                <div id="logo">
                    <img src="@Url.Content("~/Content/")Images/chess-logo--blue.png"/>
                </div>
                <div id="loginzone" style="text-align: right">
                    <p style="color: #FFF; font-weight: bold; font-size: 14px;">Welcome: @tk.UserName </p>
                    <p style="color: #FFF; font-weight: bold; font-size: 14px;">Coins: 10</p>
                    <a id="logout" style="color: #FFF; font-weight: bold; font-size: 14px; right: 0px; bottom: 0px" href="/Account/DangXuat">Logout</a>
                </div>
            </div>
        </div>

        <div id="container" class="clear">
            <div id="contents02">
                <div id="lefttab">
                    <div id="tabs">
                        <ul>
                            <li><a href="#tabs-1">Cờ vua</a></li>
                            <li><a href="#tabs-2">Cờ caro</a></li>
                            <li><a href="#tabs-3">Cờ tướng</a></li>
                            <li><a href="#tabs-4">Cập nhật tài khoản</a></li>
                        </ul>
                        <div class="tabcontent" id="tabs-1">

                            <div style="text-align: right">
                                <input type="button" value="Tạo Phòng" id="TaoPhong" name="TaoPhong" />
                                <input type="button" value="Mời bạn" id="MoiBan" name="MoiBan" />
                            </div>
                            <div id="DanhSachPhong">
                                <div class="clear"></div>
                            </div>

                            <div id="PhongCho">
                                <div style="text-align: center; font: bold; clear: both">
                                    <p>&nbsp;</p>
                                    <p>&nbsp;</p>
                                    <p>&nbsp;</p>
                                    <p id="ChoDoiThu" style="font: 30px">Chờ đối thủ !</p>
                                </div>
                                <div style="text-align: center; clear: both">Đối thủ của bạn là:<span id="TenDoiThu">?</span></div>
                                <div id="ChoChuPhongBatDau" style="text-align: center; clear: both">Chờ chủ phòng bắt đầu ván đấu !</div>
                                <div style="float: left; margin-left: 100px">
                                    <input type="button" value="Bắt đầu chơi" id="BatDauTranDau" /></div>
                                <div style="float: right; margin-left: 100px">
                                    <input type="button" value="Hủy phòng" id="HuyPhong" /></div>
                                <div style="float: right; margin-right: 100px">
                                    <input type="button" value="Mời ra khỏi phòng" id="MoiRaKhoiPhong" /></div>
                                <div style="float: right; margin-right: 100px">
                                    <input type="button" value="Rời khỏi phòng" id="RoiKhoiPhong" /></div>
                                <div class="clear"></div>
                            </div>

                            <div id="phong_danh_co" style="text-align: center">
                                <div id='board'></div>

                                <form id="formgamechat" onsubmit='sendGameChatMessage(this)'>
                                    <div id="chat">
                                        <div id="chatcontent">
                                            <div class="chatline"><span style="font-weight: bold; color: #800080">B:</span> Cung choi co nhe!</div>
                                        </div>
                                        <div id="chatinput">
                                            <input style="height: 27px; width: 550px; background-color: #BEBEBE" name="ChatContain" type="text" />
                                            </input>
                                              <input id="buttonEnter" type="image" src="@Url.Content("~/Content/Images/enter.png")" />
                                        </div>
                                    </div>
                                </form>

                                <div class="clear"></div>
                            </div>

                        </div>
                        <div class="tabcontent" id="tabs-2"></div>
                        <div class="tabcontent" id="tabs-3"></div>
                        <div class="tabcontent" id="tabs-4">
                            <div id="CapNhatTaiKhoan">
                                <form action="/Account/CapNhatTaiKhoan" method="post" id="ImgForm" target="UploadTarget" name="ImgForm" enctype="multipart/form-data">
                                    <p>&nbsp;</p>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <input type="hidden" name="Id" id="Id" value="@tk.Id" />
                                        <tr>
                                            <td colspan="2" align="center">
                                                <p style="font-weight: bold; font-size: 18px; color: #4979b4">Cập nhật tài khoản</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="right">&nbsp;</td>
                                            <td>
                                                <p>&nbsp;</p>
                                                <p>&nbsp;</p>
                                                <p>&nbsp;</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="38%" align="right">Họ tên: </td>
                                            <td width="62%">
                                                <label for="HoTen"></label>
                                                <input name="HoTen" type="text" class="TextBoxStyle01" id="HoTen" /></td>
                                        </tr>
                                        <tr>
                                            <td align="right">Ngày sinh: </td>
                                            <td>
                                                <input name="NgaySinh" type="text" class="TextBoxStyle01" id="NgaySinh" /></td>
                                        </tr>
                                        <tr>
                                            <td align="right">Mật khẩu: </td>
                                            <td>
                                                <input name="Password" type="password" class="TextBoxStyle01" id="Password" /></td>
                                        </tr>
                                        <tr>
                                            <td align="right">Nhập lại mật khẩu: </td>
                                            <td>
                                                <input name="NhapLaiPassword" type="password" class="TextBoxStyle01" id="NhapLaiPassword" /></td>
                                        </tr>
                                        <tr>
                                            <td align="right">Địa chỉ: </td>
                                            <td>
                                                <input name="DiaChi" type="text" class="TextBoxStyle01" id="DiaChi" /></td>
                                        </tr>
                                        <tr>
                                            <td align="right">Số điện thoại: </td>
                                            <td>
                                                <input name="DienThoai" type="text" class="TextBoxStyle01" id="DienThoai" /></td>
                                        </tr>
                                        <tr>
                                            <td align="right">Email: </td>
                                            <td>
                                                <input name="Email" type="text" class="TextBoxStyle01" id="Email" /></td>
                                        </tr>
                                        <tr>
                                            <td align="right">Hình ảnh: </td>
                                            <td>
                                                <label for="HinhAnh"></label>
                                                <input type="file" name="HinhAnh" id="HinhAnh" /></td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" align="center">&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" align="center">&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" align="center">
                                                <input type="submit" value="   Cập nhật   " width="127" height="30" /></td>
                                        </tr>
                                    </table>
                                    <p>&nbsp;</p>
                                </form>
                                <iframe id='UploadTarget' name='UploadTarget' onload='UploadImage_Complete();' style='position: absolute; left: -999em; top: -999em;'></iframe>
                            </div>

                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
                <div id="Right">
                    <div id="FriendContainer">
                        <div id="jp-container" class="jp-container">
                            <div id="listFriend">
                            </div>
                        </div>
                    </div>

                    <div id="bottonAction">
                        <div id="DeleteFriend">
                            Delete
                        </div>
                        <div id="AddFriendContainer">
                            Add
                        </div>
                    </div>

                </div>
            </div>
            <div class="clear"></div>
        </div>

        <div id="Footer" style="clear: both">
            <div id="ChatFormContainer" style="width: 1000px; margin: auto;">
            </div>
        </div>

    </div>

    <script type="text/javascript">
        $('.ChatFormItem form').ajaxForm({
            target: '#preview',
            success: function () {
            }
        });

        var pane = $('.ChatLineContainerScroller');
        pane.jScrollPane(
            {
                showArrows: true
            }
        );
        var api = pane.data('jsp');

        $(function () {
            var name = $("#name"),
                allFields = $([]).add(name);
            function updateTips(t) {
                tips
                    .text(t)
                    .addClass("ui-state-highlight");
                setTimeout(function () {
                    tips.removeClass("ui-state-highlight", 1500);
                }, 500);
            }

            var namecancel = $("#namecancel"),
              allFields = $([]).add(namecancel);
            function updateTips(t) {
                tips
                    .text(t)
                    .addClass("ui-state-highlight");
                setTimeout(function () {
                    tips.removeClass("ui-state-highlight", 1500);
                }, 500);
            }

            function checkLength(o, n, min, max) {
                if (o.val().length > max || o.val().length < min) {
                    o.addClass("ui-state-error");
                    updateTips("Length of " + n + " must be between " +
                        min + " and " + max + ".");
                    return false;
                } else {
                    return true;
                }
            }

            function checkRegexp(o, regexp, n) {
                if (!(regexp.test(o.val()))) {
                    o.addClass("ui-state-error");
                    updateTips(n);
                    return false;
                } else {
                    return true;
                }
            }

            $("#dialog-form").dialog({
                autoOpen: false,
                height: 250,
                width: 350,
                modal: true,
                buttons: {
                    "Add friend": function () {
                        var bValid = true;
                        allFields.removeClass("ui-state-error");
                        bValid = bValid && checkLength(name, "username", 3, 16);
                        if (bValid) {
                            //Thêm moi ban o day.
                            var username = $('#TK_UserName').attr('value');
                            var id = $('#TK_Id').attr('value');
                            ws.send(window.JSON.stringify({
                                Type: 9,
                                UserName: username,
                                Id: id,
                                ToUser: name.val()
                            }));
                            $(this).dialog("close");
                        }
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                },
                close: function () {
                    allFields.val("").removeClass("ui-state-error");
                }
            });


            $("#exitdialog-form").dialog({
                autoOpen: false,
                height: 250,
                width: 350,
                modal: true,
                buttons: {
                    "Delete friend": function () {
                        var bValid = true;
                        allFields.removeClass("ui-state-error");
                        bValid = bValid && checkLength(namecancel, "username", 3, 16);
                        if (bValid) {
                            var username = $('#TK_UserName').attr('value');
                            var id = $('#TK_Id').attr('value');
                            ws.send(window.JSON.stringify({
                                Type: 11,
                                UserName: username,
                                Id: id,
                                ToUser: namecancel.val()
                            }));
                            $(this).dialog("close");
                        }
                        else {
                            alert('NULL');
                        }
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                },
                close: function () {
                    allFields.val("").removeClass("ui-state-error");
                }
            });

            $("#invite-form").dialog({
                autoOpen: false,
                height: 250,
                width: 350,
                modal: true,
                buttons: {
                    "Invite friend": function () {
                        var bValid = true;
                        allFields.removeClass("ui-state-error");
                        bValid = bValid && checkLength(namecancel, "username", 3, 16);
                        if (bValid) {
                            var username = $('#TK_UserName').attr('value');
                            var id = $('#TK_Id').attr('value');
                            ws.send(window.JSON.stringify({
                                Type: 24,
                                UserName: username,
                                Id: id,
                                ToUser: namecancel.val()
                            }));
                            $(this).dialog("close");
                        }
                        else {
                            alert('NULL');
                        }
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                },
                close: function () {
                    allFields.val("").removeClass("ui-state-error");
                }
            });

            //invite-request-form
            $("#invite-request-form").dialog({
                autoOpen: false,
                height: 250,
                width: 350,
                modal: true,
                buttons: {
                    "OKEY": function () {
                        allFields.removeClass("ui-state-error");
                        var username = $('#TK_UserName').attr('value');
                        var id = $('#TK_Id').attr('value');
                        var toUser = $('#invitor').text();
                        ws.send(window.JSON.stringify({
                            Type: 25,
                            UserName: username,
                            Id: id,
                            Result: true,
                            ToUser: toUser
                        }));
                        $(this).dialog("close");
                    }
                    ,
                    Cancel: function () {
                        var username = $('#TK_UserName').attr('value');
                        var id = $('#TK_Id').attr('value');
                        ws.send(window.JSON.stringify({
                            Type: 25,
                            UserName: username,
                            Id: id,
                            result: false,
                            ToUser: namecancel.val()
                        }));
                        $(this).dialog("close");

                    }
                },
                close: function () {
                    allFields.val("").removeClass("ui-state-error");
                }
            });

            $("#MoiBan")
                .click(function () {
                    $("#invite-form").dialog("open");
                });

            $("#AddFriendContainer")
                .click(function () {
                    $("#dialog-form").dialog("open");
                });

            $("#DeleteFriend")
                .click(function () {
                    $("#exitdialog-form").dialog("open");
                });
        });

    </script>


</body>
</html>
